<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted,ref} from 'vue';
import axios from 'axios';
// 统计一年的订单趋势
const initLineChart = () => {
  const chartDom = document.getElementById('line');
  if (!chartDom) return;

  const myChart = echarts.init(chartDom);

  // 从API获取月度趋势数据
  const fetchMonthlyTrendData = async () => {
    try {
      const response = await axios.get('/api/statistics/orders/monthlyTrend');
      const trendData = response.data.data;

      const option = {
        title: {
          text: '近一年订单趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: Object.keys(trendData)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: Object.values(trendData),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#5470C6'
            }
          }
        ]
      };
      myChart.setOption(option);
    } catch (error) {
      console.error('获取月度趋势数据失败:', error);
    }
  };

  fetchMonthlyTrendData();
}
const initPieChart = () => {
  const chartDom = document.getElementById('pie');
  if (!chartDom) return;
  const myChart = echarts.init(chartDom);

  // 从API获取服务项统计数据
  const fetchServiceData = async () => {
    try {
      const response = await axios.get('/api/statistics/orders/by-service');
      const serviceData = response.data.data;

      const option = {
        title: {
          text: '服务项数量占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '服务项',
            type: 'pie',
            radius: '50%',
            data: serviceData.map(item => ({
              value: item.count,
              name: item.serviceType
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    } catch (error) {
      console.error('获取服务项数据失败:', error);
    }
  };

  fetchServiceData();
}
const orderStatusData = ref<{count: number, status: string}[]>([]);

const initBarChart = () => {
  const chartDom = document.getElementById('bar');
  if (!chartDom) return;
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '订单状态统计',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: orderStatusData.value.map(item => item.status)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '订单数量',
        data: orderStatusData.value.map(item => item.count),
        type: 'bar',
        itemStyle: {
          color: function(params) {
            const colorList = ['#5470C6', '#91CC75', '#EE6666'];
            return colorList[params.dataIndex] || '#5470C6';
          }
        }
      }
    ]
  };
  myChart.setOption(option);
}
// 从后端获取订单状态数据
const fetchOrderStatusData = async () => {
  try {
    const response = await axios.get('/api/statistics/orders/by-status');
    orderStatusData.value = response.data.data;
    initBarChart();
  } catch (error) {
    console.error('获取订单状态数据失败:', error);
  }
};

onMounted(() => {
  fetchOrderStatusData();
  initLineChart();
  initPieChart();
  initBarChart();
});
</script>

<template>
  <div class="data-analysis-order-container">
    <div class="o1">
      <div id="line" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="o2" id="pie"></div>
    <div class="o2" id="bar"></div>
  </div>
</template>

<style scoped>
.data-analysis-order-container {
  width: 100%;
  height: 100%;

  .o1 {
    height: 400px;
    background-color: #fff;
  }

  .o2 {
    margin-top: 20px;
    height: 400px;
    width: 50%;
    float: left;
    background-color: #fff;
  }
}
</style>